<!DOCTYPE HTML>
<html lang="en" >
    <!-- Start book 我的笔记 -->
    <head>
        <!-- head:start -->
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>Vuejs项目 | 我的笔记</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.6.7">
        
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="../../gitbook/style.css">
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-toggle-chapters/toggle.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-expandable-chapters/expandable-chapters.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-highlight/website.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-search/search.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-fontsettings/website.css">
        
    
    

        
    
    
    <link rel="next" href="../../前端学习笔记/CSS/CSS基础知识目录.html" />
    
    
    <link rel="prev" href="../../前端学习笔记/Vuejs/Vuejs高级.html" />
    

        <!-- head:end -->
    </head>
    <body>
        <!-- body:start -->
        
    <div class="book"
        data-level="2.2.4"
        data-chapter-title="Vuejs项目"
        data-filepath="前端学习笔记/Vuejs/Vuejs项目.md"
        data-basepath="../.."
        data-revision="Sat Dec 29 2018 14:49:31 GMT+0800 (中国标准时间)"
        data-innerlanguage="">
    

<div class="book-summary">
    <nav role="navigation">
        <ul class="summary">
            
            
            
            

            

            
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../../index.html">
                
                        <i class="fa fa-check"></i>
                        
                        Introduction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1" data-path="工具使用手册/工具使用手册目录.html">
            
                
                    <a href="../../工具使用手册/工具使用手册目录.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.</b>
                        
                        工具使用手册
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.1" data-path="工具使用手册/MarkDown的基本语法.html">
            
                
                    <a href="../../工具使用手册/MarkDown的基本语法.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.1.</b>
                        
                        MarkDown的基本语法
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="工具使用手册/MarkDown的注意事项.html">
            
                
                    <a href="../../工具使用手册/MarkDown的注意事项.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.2.</b>
                        
                        MarkDown的注意事项
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="工具使用手册/gitbook的使用手册/gitbook目录.html">
            
                
                    <a href="../../工具使用手册/gitbook的使用手册/gitbook目录.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.3.</b>
                        
                        gitbook的使用手册
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="工具使用手册/gitbook的使用手册/gitbook语法.html">
            
                
                    <a href="../../工具使用手册/gitbook的使用手册/gitbook语法.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.3.1.</b>
                        
                        gitbook语法
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2" data-path="前端学习笔记/前端学习目录表.html">
            
                
                    <a href="../../前端学习笔记/前端学习目录表.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.</b>
                        
                        前端学习笔记
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.1" data-path="前端学习笔记/HTML/HTML笔记目录.html">
            
                
                    <a href="../../前端学习笔记/HTML/HTML笔记目录.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.</b>
                        
                        HTML
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.1.1" data-path="前端学习笔记/HTML/HTML的基本结构.html">
            
                
                    <a href="../../前端学习笔记/HTML/HTML的基本结构.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.1.</b>
                        
                        HTML的基本语法
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.2" data-path="前端学习笔记/HTML/HTML的基本标签.html">
            
                
                    <a href="../../前端学习笔记/HTML/HTML的基本标签.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.2.</b>
                        
                        HTML的基本标签
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.3" data-path="前端学习笔记/HTML/HTML的列表标签.html">
            
                
                    <a href="../../前端学习笔记/HTML/HTML的列表标签.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.3.</b>
                        
                        HTML的列表标签
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.4" data-path="前端学习笔记/HTML/HTML的链接标签.html">
            
                
                    <a href="../../前端学习笔记/HTML/HTML的链接标签.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.4.</b>
                        
                        HTML的链接标签
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.5" data-path="前端学习笔记/HTML/HTML的图片标签.html">
            
                
                    <a href="../../前端学习笔记/HTML/HTML的图片标签.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.5.</b>
                        
                        HTML的图片标签
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.6" data-path="前端学习笔记/HTML/form表单.html">
            
                
                    <a href="../../前端学习笔记/HTML/form表单.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.6.</b>
                        
                        form表单
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.7" data-path="前端学习笔记/HTML/form常用表单类型.html">
            
                
                    <a href="../../前端学习笔记/HTML/form常用表单类型.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.7.</b>
                        
                        form常用表单类型
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.8" data-path="前端学习笔记/HTML/实体字符.html">
            
                
                    <a href="../../前端学习笔记/HTML/实体字符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.8.</b>
                        
                        实体字符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.9" data-path="前端学习笔记/HTML/多媒体.html">
            
                
                    <a href="../../前端学习笔记/HTML/多媒体.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.9.</b>
                        
                        多媒体
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.1.10" data-path="前端学习笔记/HTML/iframe框架.html">
            
                
                    <a href="../../前端学习笔记/HTML/iframe框架.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.10.</b>
                        
                        iframe框架
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.2" data-path="前端学习笔记/Vuejs/Vuejs知识目录.html">
            
                
                    <a href="../../前端学习笔记/Vuejs/Vuejs知识目录.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.</b>
                        
                        Vuejs
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.2.1" data-path="前端学习笔记/Vuejs/Vuejs基础.html">
            
                
                    <a href="../../前端学习笔记/Vuejs/Vuejs基础.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.1.</b>
                        
                        Vuejs基础
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2.2" data-path="前端学习笔记/Vuejs/Vuejs进阶.html">
            
                
                    <a href="../../前端学习笔记/Vuejs/Vuejs进阶.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.2.</b>
                        
                        Vuejs进阶
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2.3" data-path="前端学习笔记/Vuejs/Vuejs高级.html">
            
                
                    <a href="../../前端学习笔记/Vuejs/Vuejs高级.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.3.</b>
                        
                        Vuejs高级
                    </a>
            
            
        </li>
    
        <li class="chapter active" data-level="2.2.4" data-path="前端学习笔记/Vuejs/Vuejs项目.html">
            
                
                    <a href="../../前端学习笔记/Vuejs/Vuejs项目.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.4.</b>
                        
                        Vuejs项目
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.3" data-path="前端学习笔记/CSS/CSS基础知识目录.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS基础知识目录.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.</b>
                        
                        CSS
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.3.1" data-path="前端学习笔记/CSS/CSS样式优先级.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS样式优先级.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.1.</b>
                        
                        CSS样式优先级
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.2" data-path="前端学习笔记/CSS/CSS选择器.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.2.</b>
                        
                        CSS选择器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.3" data-path="前端学习笔记/CSS/属性选择器.html">
            
                
                    <a href="../../前端学习笔记/CSS/属性选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.3.</b>
                        
                        属性选择器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.4" data-path="前端学习笔记/CSS/伪类选择器.html">
            
                
                    <a href="../../前端学习笔记/CSS/伪类选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.4.</b>
                        
                        伪类选择器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.5" data-path="前端学习笔记/CSS/CSS盒子模型.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS盒子模型.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.5.</b>
                        
                        CSS盒子模型
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.6" data-path="前端学习笔记/CSS/伪对象选择器.html">
            
                
                    <a href="../../前端学习笔记/CSS/伪对象选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.6.</b>
                        
                        伪对象选器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.7" data-path="前端学习笔记/CSS/CSS字体.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS字体.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.7.</b>
                        
                        CSS字体
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.8" data-path="前端学习笔记/CSS/CSS行高.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS行高.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.8.</b>
                        
                        CSS行高
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.9" data-path="前端学习笔记/CSS/CSS文字排版.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS文字排版.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.9.</b>
                        
                        CSS文字排版
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.10" data-path="前端学习笔记/CSS/CSS背景.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS背景.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.10.</b>
                        
                        CSS背景
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.11" data-path="前端学习笔记/CSS/CSS浮动.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS浮动.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.11.</b>
                        
                        CSS浮动
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.12" data-path="前端学习笔记/CSS/CSS定位.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS定位.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.12.</b>
                        
                        CSS定位
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.13" data-path="前端学习笔记/CSS/CSS动效.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS动效.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.13.</b>
                        
                        CSS动效
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.3.14" data-path="前端学习笔记/CSS/CSS自定义动画.html">
            
                
                    <a href="../../前端学习笔记/CSS/CSS自定义动画.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.14.</b>
                        
                        CSS自定义动画
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.4" data-path="前端学习笔记/项目代码解析/项目案例总览.html">
            
                
                    <a href="../../前端学习笔记/项目代码解析/项目案例总览.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.4.</b>
                        
                        项目代码解析
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.4.1" data-path="前端学习笔记/项目代码解析/功能小案例合集/小案例合集目录.html">
            
                
                    <a href="../../前端学习笔记/项目代码解析/功能小案例合集/小案例合集目录.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.4.1.</b>
                        
                        功能小案例合集
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.4.2" data-path="前端学习笔记/项目代码解析/大项目案例合集/大项目案例合集.html">
            
            <span><b>2.4.2.</b> 大项目案例合集</span>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.5" data-path="前端学习笔记/JavaScriptES6/JavaScriptES6.html">
            
                
                    <a href="../../前端学习笔记/JavaScriptES6/JavaScriptES6.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.5.</b>
                        
                        JavaScriptES6
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.5.1" data-path="前端学习笔记/JavaScriptES6/ES6-Class.html">
            
                
                    <a href="../../前端学习笔记/JavaScriptES6/ES6-Class.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.5.1.</b>
                        
                        ES6-Class
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.5.2" data-path="前端学习笔记/JavaScriptES6/ES6模块化.html">
            
                
                    <a href="../../前端学习笔记/JavaScriptES6/ES6模块化.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.5.2.</b>
                        
                        ES6模块化
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.5.3" data-path="前端学习笔记/JavaScriptES6/ES6箭头函数.html">
            
                
                    <a href="../../前端学习笔记/JavaScriptES6/ES6箭头函数.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.5.3.</b>
                        
                        ES6箭头函数
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.6" data-path="前端学习笔记/gulp工具的使用/gulp工具的使用.html">
            
                
                    <a href="../../前端学习笔记/gulp工具的使用/gulp工具的使用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.6.</b>
                        
                        gulp工具的使用
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.7" data-path="前端学习笔记/jQuery/jQuery知识框架.html">
            
                
                    <a href="../../前端学习笔记/jQuery/jQuery知识框架.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.7.</b>
                        
                        jQuery
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.7.1" data-path="前端学习笔记/jQuery/jQuery基础.html">
            
                
                    <a href="../../前端学习笔记/jQuery/jQuery基础.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.7.1.</b>
                        
                        jQuery基础
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.7.2" data-path="前端学习笔记/jQuery/jQuery事件.html">
            
                
                    <a href="../../前端学习笔记/jQuery/jQuery事件.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.7.2.</b>
                        
                        jQuery事件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.7.3" data-path="前端学习笔记/jQuery/jQuery案例.html">
            
                
                    <a href="../../前端学习笔记/jQuery/jQuery案例.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.7.3.</b>
                        
                        jQuery案例
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.7.4" data-path="前端学习笔记/jQuery/jQuery插件.html">
            
                
                    <a href="../../前端学习笔记/jQuery/jQuery插件.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.7.4.</b>
                        
                        jQuery插件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.7.5" data-path="前端学习笔记/jQuery/jQueryAjax.html">
            
                
                    <a href="../../前端学习笔记/jQuery/jQueryAjax.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.7.5.</b>
                        
                        jQueryAjax
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.8" data-path="前端学习笔记/JavaScript/JavaScript.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.</b>
                        
                        JavaScript
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.8.1" data-path="前端学习笔记/JavaScript/JavaScript基础/JavaScript基础.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/JavaScript基础.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.</b>
                        
                        JavaScript基础
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.8.1.1" data-path="前端学习笔记/JavaScript/JavaScript基础/认识JavaScript.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/认识JavaScript.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.1.</b>
                        
                        认识JavaScript
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.2" data-path="前端学习笔记/JavaScript/JavaScript基础/js变量.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js变量.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.2.</b>
                        
                        js变量
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.3" data-path="前端学习笔记/JavaScript/JavaScript基础/js数据类型.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js数据类型.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.3.</b>
                        
                        js数据类型
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.4" data-path="前端学习笔记/JavaScript/JavaScript基础/js数据类型判断.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js数据类型判断.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.4.</b>
                        
                        js数据类型判断
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.5" data-path="前端学习笔记/JavaScript/JavaScript基础/js练习题.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js练习题.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.5.</b>
                        
                        js练习题
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.6" data-path="前端学习笔记/JavaScript/JavaScript基础/js流程控制.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js流程控制.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.6.</b>
                        
                        js流程控制
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.7" data-path="前端学习笔记/JavaScript/JavaScript基础/js循环.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js循环.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.7.</b>
                        
                        js循环
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.8" data-path="前端学习笔记/JavaScript/JavaScript基础/js运算符.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.8.</b>
                        
                        js运算符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.9" data-path="前端学习笔记/JavaScript/JavaScript基础/js字符串和布尔值.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js字符串和布尔值.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.9.</b>
                        
                        js字符串和布尔值
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.10" data-path="前端学习笔记/JavaScript/JavaScript基础/js函数和作用域.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js函数和作用域.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.10.</b>
                        
                        js函数和作用域
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.11" data-path="前端学习笔记/JavaScript/JavaScript基础/js函数的补充.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js函数的补充.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.11.</b>
                        
                        js函数的补充
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.12" data-path="前端学习笔记/JavaScript/JavaScript基础/js字符串方法.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js字符串方法.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.12.</b>
                        
                        js字符串方法
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.13" data-path="前端学习笔记/JavaScript/JavaScript基础/js数组的方法.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js数组的方法.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.13.</b>
                        
                        js数组的方法
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.14" data-path="前端学习笔记/JavaScript/JavaScript基础/jsDate时间.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/jsDate时间.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.14.</b>
                        
                        jsDate时间
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.15" data-path="前端学习笔记/JavaScript/JavaScript基础/jsDOM获取.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/jsDOM获取.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.15.</b>
                        
                        jsDOM获取
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.16" data-path="前端学习笔记/JavaScript/JavaScript基础/js垃圾回收机制.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/js垃圾回收机制.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.16.</b>
                        
                        js垃圾回收机制
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.17" data-path="前端学习笔记/JavaScript/JavaScript基础/jsDOM操作.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/jsDOM操作.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.17.</b>
                        
                        jsDOM操作
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.18" data-path="前端学习笔记/JavaScript/JavaScript基础/math.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/math.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.18.</b>
                        
                        math
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.19" data-path="前端学习笔记/JavaScript/JavaScript基础/number.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/number.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.19.</b>
                        
                        number
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.20" data-path="前端学习笔记/JavaScript/JavaScript基础/array.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/array.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.20.</b>
                        
                        array
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.21" data-path="前端学习笔记/JavaScript/JavaScript基础/boolean.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/boolean.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.21.</b>
                        
                        boolean
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.22" data-path="前端学习笔记/JavaScript/JavaScript基础/date.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/date.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.22.</b>
                        
                        date
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.1.23" data-path="前端学习笔记/JavaScript/JavaScript基础/arguments对象.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript基础/arguments对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.1.23.</b>
                        
                        arguments对象
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.8.2" data-path="前端学习笔记/JavaScript/JavaScript进阶/JavaScript进阶.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/JavaScript进阶.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.</b>
                        
                        JavaScript进阶
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.8.2.1" data-path="前端学习笔记/JavaScript/JavaScript进阶/js定时器.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/js定时器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.1.</b>
                        
                        js定时器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.2.2" data-path="前端学习笔记/JavaScript/JavaScript进阶/js快速排序.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/js快速排序.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.2.</b>
                        
                        js快速排序
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.2.3" data-path="前端学习笔记/JavaScript/JavaScript进阶/js冒泡排序.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/js冒泡排序.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.3.</b>
                        
                        js冒泡排序
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.2.4" data-path="前端学习笔记/JavaScript/JavaScript进阶/js递归.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/js递归.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.4.</b>
                        
                        js递归
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.2.5" data-path="前端学习笔记/JavaScript/JavaScript进阶/js倒计时.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/js倒计时.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.5.</b>
                        
                        js倒计时
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.2.6" data-path="前端学习笔记/JavaScript/JavaScript进阶/js轮播图.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/js轮播图.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.6.</b>
                        
                        js轮播图
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.2.7" data-path="前端学习笔记/JavaScript/JavaScript进阶/js省市联动.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/js省市联动.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.7.</b>
                        
                        js省市联动
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.2.8" data-path="前端学习笔记/JavaScript/JavaScript进阶/js拖拽事件.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/js拖拽事件.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.8.</b>
                        
                        js拖拽事件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.2.9" data-path="前端学习笔记/JavaScript/JavaScript进阶/js鼠标三击事件.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/js鼠标三击事件.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.9.</b>
                        
                        js鼠标三击事件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.2.10" data-path="前端学习笔记/JavaScript/JavaScript进阶/js多个按键触发.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/js多个按键触发.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.10.</b>
                        
                        js多个按键触发
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.2.11" data-path="前端学习笔记/JavaScript/JavaScript进阶/function.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/function.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.11.</b>
                        
                        js的function
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.2.12" data-path="前端学习笔记/JavaScript/JavaScript进阶/function的使用.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript进阶/function的使用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.2.12.</b>
                        
                        jsfunction的使用
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.8.3" data-path="前端学习笔记/JavaScript/JavaScript高级/JavaScript高级.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/JavaScript高级.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.</b>
                        
                        JavaScript高级
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.8.3.1" data-path="前端学习笔记/JavaScript/JavaScript高级/js创建对象.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js创建对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.1.</b>
                        
                        js创建对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.2" data-path="前端学习笔记/JavaScript/JavaScript高级/js对象的属性.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js对象的属性.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.2.</b>
                        
                        js对象的属性
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.3" data-path="前端学习笔记/JavaScript/JavaScript高级/js对象的继承.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js对象的继承.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.3.</b>
                        
                        js对象的继承
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.4" data-path="前端学习笔记/JavaScript/JavaScript高级/js构造函数和原型对象.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js构造函数和原型对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.4.</b>
                        
                        js构造函数和原型对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.5" data-path="前端学习笔记/JavaScript/JavaScript高级/js事件冒泡.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js事件冒泡.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.5.</b>
                        
                        js事件冒泡
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.6" data-path="前端学习笔记/JavaScript/JavaScript高级/js运用Ajax.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js运用Ajax.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.6.</b>
                        
                        js运用Ajax
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.7" data-path="前端学习笔记/JavaScript/JavaScript高级/js中的call和apply.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js中的call和apply.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.7.</b>
                        
                        js中的call和apply
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.8" data-path="前端学习笔记/JavaScript/JavaScript高级/js中的new.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js中的new.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.8.</b>
                        
                        js中的new
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.9" data-path="前端学习笔记/JavaScript/JavaScript高级/js中的this.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js中的this.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.9.</b>
                        
                        js中的this
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.10" data-path="前端学习笔记/JavaScript/JavaScript高级/js中的闭包.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js中的闭包.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.10.</b>
                        
                        js中的闭包
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.11" data-path="前端学习笔记/JavaScript/JavaScript高级/js中的跨域.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js中的跨域.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.11.</b>
                        
                        js中的跨域
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.12" data-path="前端学习笔记/JavaScript/JavaScript高级/js事件代理.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js事件代理.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.12.</b>
                        
                        js事件代理
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.13" data-path="前端学习笔记/JavaScript/JavaScript高级/js的BOM对象.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js的BOM对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.13.</b>
                        
                        js的BOM对象
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.14" data-path="前端学习笔记/JavaScript/JavaScript高级/js中的存储.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js中的存储.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.14.</b>
                        
                        js中的存储
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.15" data-path="前端学习笔记/JavaScript/JavaScript高级/js面向对象编程.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js面向对象编程.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.15.</b>
                        
                        js面向对象编程
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.16" data-path="前端学习笔记/JavaScript/JavaScript高级/proto.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/proto.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.16.</b>
                        
                        proto属性
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.3.17" data-path="前端学习笔记/JavaScript/JavaScript高级/js正则表达式.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级/js正则表达式.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.3.17.</b>
                        
                        js正则表达式
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.8.4" data-path="前端学习笔记/JavaScript/JavaScript高级2/JavaScript高级2.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/JavaScript高级2.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.</b>
                        
                        JavaScript高级2
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.8.4.1" data-path="前端学习笔记/JavaScript/JavaScript高级2/参数代码太长的问题.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/参数代码太长的问题.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.1.</b>
                        
                        参数代码太长的问题
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.2" data-path="前端学习笔记/JavaScript/JavaScript高级2/传统构造函数存在的问题.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/传统构造函数存在的问题.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.2.</b>
                        
                        传统构造函数存在的问题
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.3" data-path="前端学习笔记/JavaScript/JavaScript高级2/对象的动态特性.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/对象的动态特性.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.3.</b>
                        
                        对象的动态特性
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.4" data-path="前端学习笔记/JavaScript/JavaScript高级2/对象相关的其他知识.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/对象相关的其他知识.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.4.</b>
                        
                        对象相关的其他知识
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.5" data-path="前端学习笔记/JavaScript/JavaScript高级2/构造函数.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/构造函数.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.5.</b>
                        
                        构造函数
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.6" data-path="前端学习笔记/JavaScript/JavaScript高级2/函数的重复创建问题.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/函数的重复创建问题.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.6.</b>
                        
                        函数的重复创建问题
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.7" data-path="前端学习笔记/JavaScript/JavaScript高级2/基础复习题.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/基础复习题.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.7.</b>
                        
                        基础复习题
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.8" data-path="前端学习笔记/JavaScript/JavaScript高级2/继承的实现方式.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/继承的实现方式.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.8.</b>
                        
                        继承的实现方式
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.9" data-path="前端学习笔记/JavaScript/JavaScript高级2/静态成员和实例成员.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/静态成员和实例成员.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.9.</b>
                        
                        静态成员和实例成员
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.10" data-path="前端学习笔记/JavaScript/JavaScript高级2/面向对象的三大特性.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/面向对象的三大特性.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.10.</b>
                        
                        面向对象的三大特性
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.11" data-path="前端学习笔记/JavaScript/JavaScript高级2/面向对象概念介绍.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/面向对象概念介绍.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.11.</b>
                        
                        面向对象概念介绍
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.12" data-path="前端学习笔记/JavaScript/JavaScript高级2/深拷贝和浅拷贝.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/深拷贝和浅拷贝.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.12.</b>
                        
                        深拷贝和浅拷贝
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.13" data-path="前端学习笔记/JavaScript/JavaScript高级2/使用原型解决构造函数问题.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/使用原型解决构造函数问题.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.13.</b>
                        
                        使用原型解决构造函数问题
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.14" data-path="前端学习笔记/JavaScript/JavaScript高级2/属性搜索原则.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/属性搜索原则.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.14.</b>
                        
                        属性搜索原则
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.15" data-path="前端学习笔记/JavaScript/JavaScript高级2/数据类型.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/数据类型.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.15.</b>
                        
                        数据类型
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.16" data-path="前端学习笔记/JavaScript/JavaScript高级2/异常处理.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/异常处理.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.16.</b>
                        
                        异常处理
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.17" data-path="前端学习笔记/JavaScript/JavaScript高级2/原型的使用.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/原型的使用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.17.</b>
                        
                        原型的使用
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.18" data-path="前端学习笔记/JavaScript/JavaScript高级2/原型链结构.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/原型链结构.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.18.</b>
                        
                        原型链结构
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.19" data-path="前端学习笔记/JavaScript/JavaScript高级2/原型相关概念.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/原型相关概念.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.19.</b>
                        
                        原型相关概念
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.20" data-path="前端学习笔记/JavaScript/JavaScript高级2/原型式继承.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/原型式继承.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.20.</b>
                        
                        原型式继承
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.21" data-path="前端学习笔记/JavaScript/JavaScript高级2/值类型和引用类型.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/值类型和引用类型.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.21.</b>
                        
                        值类型和引用类型
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.8.4.22" data-path="前端学习笔记/JavaScript/JavaScript高级2/值类型和引用类型的特征.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript高级2/值类型和引用类型的特征.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.4.22.</b>
                        
                        值类型和引用类型的特征
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.8.5" data-path="前端学习笔记/JavaScript/JavaScript题库/JavaScript题库.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript题库/JavaScript题库.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.5.</b>
                        
                        JavaScript题库
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.8.5.1" data-path="前端学习笔记/JavaScript/JavaScript题库/JavaScript基础题.html">
            
                
                    <a href="../../前端学习笔记/JavaScript/JavaScript题库/JavaScript基础题.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.8.5.1.</b>
                        
                        JavaScript基础题
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.8.6" data-path="前端学习笔记/JavaScript/ES6语法/ES6语法.html">
            
            <span><b>2.8.6.</b> ES6语法</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.8.6.1" data-path="前端学习笔记/JavaScript/ES6语法/ES6箭头函数.html">
            
            <span><b>2.8.6.1.</b> ES6箭头函数</span>
            
            
        </li>
    

            </ul>
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.9" data-path="前端学习笔记/GIT/git的使用.html">
            
                
                    <a href="../../前端学习笔记/GIT/git的使用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.9.</b>
                        
                        GIT
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.10" data-path="前端学习笔记/SASS语法/SASS语法.html">
            
                
                    <a href="../../前端学习笔记/SASS语法/SASS语法.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.10.</b>
                        
                        SASS语法
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.10.1" data-path="前端学习笔记/SASS语法/SASS安装.html">
            
                
                    <a href="../../前端学习笔记/SASS语法/SASS安装.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.10.1.</b>
                        
                        SASS安装
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.11" data-path="前端学习笔记/插件的使用/插件目录.html">
            
                
                    <a href="../../前端学习笔记/插件的使用/插件目录.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.11.</b>
                        
                        插件的使用
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.11.1" data-path="前端学习笔记/插件的使用/高德地图API.html">
            
                
                    <a href="../../前端学习笔记/插件的使用/高德地图API.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.11.1.</b>
                        
                        高德地图API
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.11.2" data-path="前端学习笔记/插件的使用/轮播图插件.html">
            
                
                    <a href="../../前端学习笔记/插件的使用/轮播图插件.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.11.2.</b>
                        
                        轮播图插件
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.11.3" data-path="前端学习笔记/插件的使用/Animate插件.html">
            
                
                    <a href="../../前端学习笔记/插件的使用/Animate插件.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.11.3.</b>
                        
                        Animate插件
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.12" data-path="前端学习笔记/移动端/移动端.html">
            
                
                    <a href="../../前端学习笔记/移动端/移动端.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.12.</b>
                        
                        移动端
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.12.1" data-path="前端学习笔记/移动端/移动端环境布局.html">
            
                
                    <a href="../../前端学习笔记/移动端/移动端环境布局.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.12.1.</b>
                        
                        移动端环境布局
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.13" data-path="前端学习笔记/网页布局神器/网页布局神器目录.html">
            
                
                    <a href="../../前端学习笔记/网页布局神器/网页布局神器目录.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.13.</b>
                        
                        网页布局神器
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.13.1" data-path="前端学习笔记/网页布局神器/FlexBox的使用.html">
            
                
                    <a href="../../前端学习笔记/网页布局神器/FlexBox的使用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.13.1.</b>
                        
                        FlexBox的使用
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.13.2" data-path="前端学习笔记/网页布局神器/rem的使用.html">
            
                
                    <a href="../../前端学习笔记/网页布局神器/rem的使用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.13.2.</b>
                        
                        rem的使用
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.13.3" data-path="前端学习笔记/网页布局神器/vw和vh的使用.html">
            
                
                    <a href="../../前端学习笔记/网页布局神器/vw和vh的使用.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.13.3.</b>
                        
                        vw和vh的使用
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.13.4" data-path="前端学习笔记/网页布局神器/媒体查询.html">
            
                
                    <a href="../../前端学习笔记/网页布局神器/媒体查询.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.13.4.</b>
                        
                        媒体查询
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.13.5" data-path="前端学习笔记/网页布局神器/筛子布局案例.html">
            
                
                    <a href="../../前端学习笔记/网页布局神器/筛子布局案例.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.13.5.</b>
                        
                        筛子布局案例
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2.14" data-path="前端学习笔记/前端坑点总结/前端坑点总结.html">
            
                
                    <a href="../../前端学习笔记/前端坑点总结/前端坑点总结.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.14.</b>
                        
                        前端坑点总结
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.14.1" data-path="前端学习笔记/前端坑点总结/HTML和CSS坑点总结.html">
            
                
                    <a href="../../前端学习笔记/前端坑点总结/HTML和CSS坑点总结.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.14.1.</b>
                        
                        HTML和CSS坑点总结
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    

            </ul>
            
        </li>
    


            
            <li class="divider"></li>
            <li>
                <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                    Published with GitBook
                </a>
            </li>
            
        </ul>
    </nav>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header" role="navigation">
    <!-- Actions Left -->
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../../" >我的笔记</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1" role="main">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <h2 id="&#x732B;&#x773C;&#x7535;&#x5F71;&#x9879;&#x76EE;">&#x732B;&#x773C;&#x7535;&#x5F71;&#x9879;&#x76EE;</h2>
<h2 id="&#x8DEF;&#x7531;">&#x8DEF;&#x7531;</h2>
<pre><code class="lang-js">import Vue from &apos;vue&apos;
import Router from &apos;vue-router&apos;
import Home from &apos;./views/Home.vue&apos;

import Playing from &apos;./views/Playing.vue&apos; 
import Comming from &apos;./views/Comming.vue&apos;

Vue.use(Router)

export default new Router({
  /* mode: &apos;history&apos;,
  base: process.env.BASE_URL, */
  routes: [
    {
      path:&apos;/&apos;,redirect:&quot;/home&quot;
    },
    {
      path: &apos;/home&apos;,
      name: &apos;home&apos;,
      component: Home,
      children: [
          { path:&quot;playing&quot;,component: Playing },
          { path:&quot;comming&quot;,component:Comming },    
          { path:&quot;&quot;,redirect:&apos;playing&apos;}
      ]
    },
    {
      path: &apos;/about&apos;,
      name: &apos;about&apos;,
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () =&gt; import(/* webpackChunkName: &quot;about&quot; */ &apos;./views/About.vue&apos;)
    },
    {
      path:&apos;/mine/:userId&apos;,     //(&#x5FC5;&#x9009;)
      name:&quot;mine&quot;,
      //component:Mine    //(&#x5FC5;&#x9009;)
      /* component:function(){
        return import(&apos;./views/Mine.vue&apos;);
      } */
      component: () =&gt; import(&apos;./views/Mine.vue&apos;)
    },
    {
      path:&apos;/movie/:movieId&apos;,
      name:&apos;movie&apos;,
      component: ()=&gt;import(&apos;./views/Movie.vue&apos;)
    },
    {
      path:&apos;/shows/:cinemaId&apos;,
      name:&apos;shows&apos;,
      component: ()=&gt;import(&apos;./views/Shows.vue&apos;)
    }
  ]
})
</code></pre>
<h2 id="home">Home</h2>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;home&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;homeNav&quot;</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;home_sel&quot;</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">select</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;&quot;</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">&quot;sel_con&quot;</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">:class</span>=<span class="hljs-value">&quot;{&apos;color&apos;:&apos;titleColor&apos;}&quot;</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;gz&quot;</span>&gt;</span>&#x5E7F;&#x5DDE;<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;sz&quot;</span>&gt;</span>&#x6DF1;&#x5733;<span class="hljs-tag">&lt;/<span class="hljs-title">option</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">select</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;link&quot;</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">router-link</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;link_left&quot;</span> <span class="hljs-attribute">to</span>=<span class="hljs-value">&quot;/home/playing&quot;</span>&gt;</span>&#x6B63;&#x5728;&#x70ED;&#x6620;<span class="hljs-tag">&lt;/<span class="hljs-title">router-link</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">router-link</span>  <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;link_right&quot;</span> <span class="hljs-attribute">to</span>=<span class="hljs-value">&quot;/home/comming&quot;</span>&gt;</span>&#x5373;&#x5C06;&#x4E0A;&#x6620;<span class="hljs-tag">&lt;/<span class="hljs-title">router-link</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;home_sou&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">&quot;&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;iconfont icon-search&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    <span class="hljs-comment">&lt;!-- home&#x4E0B;&#x7684;&#x5B50;&#x8DEF;&#x7531;  children --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">router-view</span> /&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-title">script</span>&gt;</span><span class="javascript">
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;../scss/home.scss&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;../css/iconfont.css&apos;</span>;

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
  name: <span class="hljs-string">&quot;home&quot;</span>,
  created() {
  },
  data(){
    <span class="hljs-keyword">return</span> {
    }
  },
  methods: {
    <span class="hljs-comment">// &#x4FEE;&#x6539;&#x56FE;&#x7247;&#x5C3A;&#x5BF8;</span>
    picFix(url){
      <span class="hljs-keyword">return</span> url.replace(<span class="hljs-string">&apos;w.h&apos;</span>,<span class="hljs-string">&apos;128.180&apos;</span>);
    },
    <span class="hljs-comment">// &#x8DF3;&#x8F6C;&#x7535;&#x5F71;&#x9875;</span>
    toMovie(id){
      <span class="hljs-comment">/* &#x5F53;&#x6211;&#x70B9;&#x51FB;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x8DF3;&#x8F6C;&#x5230;movie&#x9875;&#x9762;&#xFF0C;&#x5E76;&#x4E14;&#x628A;movieId&#x7684;id&#x4F20;&#x8FC7;&#x53BB; */</span>
      <span class="hljs-keyword">this</span>.$router.push({name:<span class="hljs-string">&quot;movie&quot;</span>,params:{ movieId : id } })
    },
    toAbout() {
      <span class="hljs-comment">/* console.log(this);
      // &#x8DEF;&#x7531;&#x5BF9;&#x8C61;&#x7684;&#x65B9;&#x6CD5; push&#x5C31;&#x662F;&#x8DF3;&#x8F6C;
      // query &#x67E5;&#x8BE2;&#x5B57;&#x7B26;&#x4E32;&#x7684;&#x53C2;&#x6570;   /about?id=4396&amp;name=777
      this.$router.push({
        path: &quot;/about&quot;,
        query: {
          id: 4396,
          name: 777
        } */</span>
      <span class="hljs-comment">//});</span>

      <span class="hljs-comment">// &#x8DF3;&#x8F6C;&#x547D;&#x540D;&#x8DEF;&#x7531;   &#x4F20;&#x53C2;&#x4F7F;&#x7528;params   /about</span>

      <span class="hljs-comment">// this.$router.push({ name: &apos;about&apos;,</span>
      <span class="hljs-comment">//   params:{</span>
      <span class="hljs-comment">//     id:4396</span>
      <span class="hljs-comment">//   }</span>
      <span class="hljs-comment">// })</span>
    },
    toMine(){
      <span class="hljs-comment">// &#x8DF3;&#x8F6C; &#x52A8;&#x6001;&#x8DEF;&#x7531; /mine/:userId    userId = 1234</span>
      <span class="hljs-comment">// this.$router.push({ path: &quot;/home/1234/comming&quot; });</span>

      <span class="hljs-comment">// /home/:id/comming</span>
      <span class="hljs-comment">// this.$router.push({ name:&apos;comming&apos;,params:{</span>
      <span class="hljs-comment">//   id:1234</span>
      <span class="hljs-comment">//  } })</span>
    }
  },
  components: {
    <span class="hljs-comment">// HelloWorld</span>
  }
};
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>


<span class="hljs-tag">&lt;<span class="hljs-title">style</span> <span class="hljs-attribute">lang</span>=<span class="hljs-value">&quot;scss&quot;</span> &gt;</span><span class="css">

</span><span class="hljs-tag">&lt;/<span class="hljs-title">style</span>&gt;</span>
</code></pre>
<h2 id="movie">Movie</h2>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">template</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">&quot;moviePage&quot;</span> &gt;</span>
        <span class="hljs-comment">&lt;!-- &#x7535;&#x5F71;&#x8BE6;&#x60C5; --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;movie-detail&quot;</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;mask&quot;</span> <span class="hljs-attribute">:style</span>=<span class="hljs-value">&quot;{&apos;backgroundImage&apos;:`url(${picFix(detailMovie.img)})`}&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;cover&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">img</span> <span class="hljs-attribute">:src</span>=<span class="hljs-value">&quot;picFix(detailMovie.img)&quot;</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">&quot;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;detail&quot;</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;title textover1&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;title-en textover1&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;grade textover1&quot;</span>&gt;</span>&#x6682;&#x65E0;&#x8BC4;&#x5206;<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;cat textover1&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;fra textover1&quot;</span>&gt;</span> / &#x5206;&#x949F;<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;pubDesc textover1&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;more&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
        <span class="hljs-comment">&lt;!-- &#x65F6;&#x95F4;&#x8868; --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">swiper</span> <span class="hljs-attribute">:options</span>=<span class="hljs-value">&quot;swiperOption&quot;</span> <span class="hljs-attribute">ref</span>=<span class="hljs-value">&quot;mySwiper&quot;</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">swiper-slide</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">&quot;swiper_con&quot;</span>  <span class="hljs-attribute">v-for</span>=<span class="hljs-value">&quot;item in showDay.dates&quot;</span> <span class="hljs-attribute">:key</span>=<span class="hljs-value">&quot;item.id&quot;</span> &gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;swiper_time&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-title">swiper-slide</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">swiper</span>&gt;</span>
        <span class="hljs-comment">&lt;!-- &#x7B5B;&#x9009; --&gt;</span>

        <span class="hljs-comment">&lt;!-- &#x5F71;&#x9662;&#x5217;&#x8868; --&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;cinemas-list&quot;</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">ul</span> <span class="hljs-attribute">v-infinite-scroll</span>=<span class="hljs-value">&quot;loadMore&quot;</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">v-for</span>=<span class="hljs-value">&apos;cin in cinemas&apos;</span> <span class="hljs-attribute">:key</span>=<span class="hljs-value">&apos;cin.id&apos;</span> @<span class="hljs-attribute">click</span>=<span class="hljs-value">&quot;toShows(cin.id)&quot;</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;title-block&quot;</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;title&quot;</span>&gt;</span>
                            <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;name&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>
                            <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;sellPrice&quot;</span>&gt;</span>
                                <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;price&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>&#x5143;&#x8D77;
                            <span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>
                        <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
                        <span class="hljs-comment">&lt;!-- &#x5730;&#x70B9; --&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;location&quot;</span>&gt;</span>
                            <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;addr textover1&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>
                            <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;distance textover1&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>
                        <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
                        <span class="hljs-comment">&lt;!-- &#x6539;&#x7B7E;&#x5C0F;&#x5403;&#x7B49; --&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;label&quot;</span> <span class="hljs-attribute">v-if</span>=<span class="hljs-value">&apos;cin.tag.sell&apos;</span>&gt;</span>
                            <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;label_span1&quot;</span> <span class="hljs-attribute">v-if</span>=<span class="hljs-value">&apos;cin.tag.sell&apos;</span>&gt;</span>&#x6539;&#x7B7E;<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>
                            <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;label_span2&quot;</span> <span class="hljs-attribute">v-if</span>=<span class="hljs-value">&apos;cin.tag.snack&apos;</span>&gt;</span>&#x5C0F;&#x5403;<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>
                            <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;label_span3&quot;</span> <span class="hljs-attribute">v-if</span>=<span class="hljs-value">&apos;cin.tag.vipTag&apos;</span>&gt;</span>&#x6298;&#x6263;&#x5361;<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>
                        <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
                        <span class="hljs-comment">&lt;!-- &#x5F00;&#x5361;&#x7279;&#x60E0; --&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;label_vip&quot;</span>&gt;</span>
                            <span class="hljs-tag">&lt;<span class="hljs-title">span</span>&gt;</span>&#x5F00;&#x5361;&#x7279;&#x60E0;<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>
                        <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;showTimes&quot;</span>&gt;</span>
                            &#x8FD1;&#x671F;&#x573A;&#x6B21;&#xFF1A;
                        <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
                    <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">mt-spinner</span>&gt;</span>&#x52AA;&#x529B;&#x52A0;&#x8F7D;&#x4E2D;...<span class="hljs-tag">&lt;/<span class="hljs-title">mt-spinner</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-title">script</span>&gt;</span><span class="javascript">
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;../scss/movie.scss&apos;</span>;
<span class="hljs-comment">// </span>
<span class="hljs-keyword">import</span> qs <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;qs&apos;</span>;

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    created(){
        <span class="hljs-comment">// &#x83B7;&#x53D6;&#x4ECA;&#x5929;&#x65E5;&#x671F;</span>
        <span class="hljs-keyword">this</span>.day = <span class="hljs-keyword">this</span>.today();
        <span class="hljs-comment">// &#x63A5;&#x6536;&#x70B9;&#x51FB;&#x4F20;&#x8FC7;&#x6765;&#x7684;&#x5BF9;&#x5E94;&#x7535;&#x5F71;&#x5BF9;&#x8C61;&#x7684;ID(&#x6574;&#x4E2A;&#x7535;&#x5F71;&#x5BF9;&#x8C61;)</span>
        <span class="hljs-keyword">this</span>.movieId = <span class="hljs-keyword">this</span>.$route.params.movieId ;
        <span class="hljs-comment">// &#x7535;&#x5F71;&#x8BE6;&#x60C5;</span>
        <span class="hljs-comment">/* &#x5F02;&#x6B65;&#x64CD;&#x4F5C;&#xFF0C;&#x5F53;&#x5B8C;&#x6210;&#x83B7;&#x53D6;&#x6570;&#x636E;&#x540E;&#xFF0C;&#x624D;&#x6267;&#x884C;then() */</span>
        <span class="hljs-comment">//</span>
        <span class="hljs-keyword">this</span>.axios.get(<span class="hljs-string">&apos;/maoyan/ajax/detailmovie&apos;</span> ,{
            params:{
                movieId: <span class="hljs-keyword">this</span>.movieId
            }
            <span class="hljs-comment">/* then(res)&#x7684;res&#x6570;&#x636E;&#x662F;&#x6574;&#x4E2A;detailmovie&#x4FE1;&#x606F; */</span>
        }).then((res)=&gt;{
            <span class="hljs-comment">// console.log(res.data);</span>
            <span class="hljs-comment">/* &#x628A;&#x7535;&#x5F71;&#x6570;&#x636E;&#x7684;detailMovie&#x4FDD;&#x5B58;&#x5230;&#x5F53;&#x5730; */</span>
            <span class="hljs-keyword">this</span>.detailMovie = res.data.detailMovie;
            <span class="hljs-keyword">this</span>.$store.commit(<span class="hljs-string">&apos;changeHT&apos;</span>,<span class="hljs-keyword">this</span>.detailMovie.nm)
        })
        <span class="hljs-keyword">var</span> timestamp = (<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>()).getTime();
        <span class="hljs-comment">// &#x5F71;&#x9662;&#x4FE1;&#x606F;</span>
        <span class="hljs-keyword">this</span>.getCinemas(<span class="hljs-keyword">this</span>.day,<span class="hljs-number">0</span>);

    },

    computed:{
      swiper() {
        <span class="hljs-comment">//   &#x83B7;&#x53D6;swiper&#x5B9E;&#x4F8B;&#x91CC;&#x7684;&#x6570;&#x636E;&#xFF0C;&#x5305;&#x542B;&#x6539;&#x53D8;index&#x7684;&#x65B9;&#x6CD5;</span>
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.$refs.mySwiper.swiper
      }
    },
    data(){
        <span class="hljs-keyword">return</span> {
            <span class="hljs-comment">// &#x70B9;&#x51FB;&#x83B7;&#x53D6;&#x7684;&#x65F6;&#x95F4;&#x6570;&#x636E;</span>
            clickTime:<span class="hljs-string">&apos;&apos;</span>,
            <span class="hljs-comment">// &#x5C55;&#x793A;&#x65F6;&#x95F4;</span>
            showDay:<span class="hljs-string">&apos;&apos;</span>,
            movieId : <span class="hljs-string">&apos;&apos;</span>,
            detailMovie:<span class="hljs-string">&apos;&apos;</span>,
            cinemas:[],
            day:<span class="hljs-keyword">this</span>.day,
            offset:<span class="hljs-number">0</span>,
             swiperOption: {
                slidesPerView: <span class="hljs-number">3</span>,
                spaceBetween: <span class="hljs-number">30</span>,
                freeMode: <span class="hljs-literal">true</span>,
                pagination: {
                    el: <span class="hljs-string">&apos;.swiper-pagination&apos;</span>,
                    clickable: <span class="hljs-literal">true</span>
                },
                on:{
                    click:()=&gt;{
                        <span class="hljs-comment">// console.log(&apos;hahaha&apos;);</span>
                        <span class="hljs-comment">// &#x83B7;&#x53D6;&#x8BE5;&#x65F6;&#x95F4;&#x70B9;</span>
                        <span class="hljs-keyword">this</span>.cinemas = [];
                        <span class="hljs-keyword">this</span>.clickTime =<span class="hljs-keyword">this</span>.swiper.clickedIndex;
                        <span class="hljs-keyword">this</span>.day = <span class="hljs-keyword">this</span>.showDay.dates[<span class="hljs-keyword">this</span>.clickTime].date;
                        <span class="hljs-comment">//&#x8C03;&#x7528;&#x6E32;&#x67D3;&#x5BF9;&#x5E94;&#x7684;&#x51FD;&#x6570;</span>
                        <span class="hljs-keyword">this</span>.offset = <span class="hljs-number">0</span>;
                        <span class="hljs-keyword">this</span>.getCinemas(<span class="hljs-keyword">this</span>.day,<span class="hljs-keyword">this</span>.offset);
                    },
                },
            }
        }
    },
    methods:{
        <span class="hljs-comment">//&#x83B7;&#x53D6;&#x5F53;&#x524D;&#x7684;&#x65F6;&#x95F4;</span>
        today(){
            <span class="hljs-keyword">let</span> d = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>();
            <span class="hljs-keyword">let</span> year = d.getFullYear();
            <span class="hljs-keyword">let</span> month = d.getMonth()+<span class="hljs-number">1</span>;
            <span class="hljs-keyword">let</span> day = d.getDate();
            <span class="hljs-keyword">return</span> year +<span class="hljs-string">&apos;-&apos;</span>+month+<span class="hljs-string">&apos;-&apos;</span>+day;
        },
        <span class="hljs-comment">//&#x5982;&#x679C;url&#x662F;&#x5B57;&#x7B26;&#x4E32;&#x5C31;&#x66FF;&#x6362;&#x56FE;&#x7247;&#x7684;&#x7684;&#x5C3A;&#x5BF8;</span>
        picFix(url){
            <span class="hljs-keyword">if</span>(<span class="hljs-keyword">typeof</span> url == <span class="hljs-string">&apos;string&apos;</span>){
                <span class="hljs-keyword">return</span> url.replace(<span class="hljs-string">&apos;w.h&apos;</span>,<span class="hljs-string">&apos;128.180&apos;</span>);
            }
        },
        toShows(cinemaId){
            <span class="hljs-keyword">this</span>.$router.push({name:<span class="hljs-string">&apos;shows&apos;</span>, 
                params:{ cinemaId : cinemaId },
                query:{movieId: <span class="hljs-keyword">this</span>.id,}
            })
        },
        getCinemas(day,offset){
            <span class="hljs-keyword">this</span>.axios.post(<span class="hljs-string">&apos;/maoyan/ajax/movie&apos;</span> ,qs.stringify({
                movieId: <span class="hljs-keyword">this</span>.movieId,
                day: day,
                offset: offset,
                limit: <span class="hljs-number">20</span>,
                districtId: -<span class="hljs-number">1</span>,
                lineId: -<span class="hljs-number">1</span>,
                hallType: -<span class="hljs-number">1</span>,
                brandId: -<span class="hljs-number">1</span>,
                serviceId: -<span class="hljs-number">1</span>,
                areaId: -<span class="hljs-number">1</span>,
                stationId: -<span class="hljs-number">1</span>,
                item: <span class="hljs-string">&quot;&quot;</span>,
                updateShowDay: <span class="hljs-literal">true</span>,
                reqId: <span class="hljs-number">1545367192578</span>,
                cityId: <span class="hljs-number">20</span>,
            })
            ).then((res)=&gt;{
                <span class="hljs-built_in">console</span>.log( res.data );
                <span class="hljs-keyword">this</span>.cinemas = <span class="hljs-keyword">this</span>.cinemas.concat(res.data.cinemas);
                <span class="hljs-keyword">this</span>.showDay = res.data.showDays;
            })
        },
        loadMore(day,offset){
            <span class="hljs-keyword">this</span>.offset += <span class="hljs-number">20</span>;
            <span class="hljs-keyword">this</span>.getCinemas(<span class="hljs-keyword">this</span>.day,<span class="hljs-keyword">this</span>.offset)
        },
    }

}
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
</code></pre>
<h2 id="playing">playing</h2>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">template</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;playing&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">transition-group</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;trans&quot;</span> <span class="hljs-attribute">tag</span>=<span class="hljs-value">&apos;ul&apos;</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">&quot;slideUp&quot;</span> &gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;movies clearfix&quot;</span>
        <span class="hljs-attribute">v-for</span>=<span class="hljs-value">&quot;movies in  movieList&quot;</span> 
        <span class="hljs-attribute">:key</span>=<span class="hljs-value">&quot;movies.id&quot;</span> 
        @<span class="hljs-attribute">click</span>=<span class="hljs-value">&quot;toMovie(movies.id)&quot;</span>  &gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;coverBox&quot;</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">img</span> <span class="hljs-attribute">:src</span>=<span class="hljs-value">&quot;picFix(movies.img)&quot;</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">&quot;&quot;</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;movieContent&quot;</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">h2</span>  <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;textover1&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">h2</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;textover1&quot;</span> <span class="hljs-attribute">v-if</span>=<span class="hljs-value">&quot;movies.globalReleased &amp;&amp; movies.sc != 0&quot;</span>&gt;</span>&#x89C2;&#x4F17;&#x8BC4;<span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;grade&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;textover1&quot;</span> <span class="hljs-attribute">v-if</span>=<span class="hljs-value">&quot;movies.globalReleased==false&quot;</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;person&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>&#x4EBA;&#x60F3;&#x770B;
          <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;textover1&quot;</span> <span class="hljs-attribute">v-if</span>=<span class="hljs-value">&quot;movies.globalReleased &amp;&amp; movies.sc==0&quot;</span>&gt;</span>
            &#x6682;&#x65E0;&#x8BC4;&#x5206;
          <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>

          <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;textover1&quot;</span>&gt;</span>&#x4E3B;&#x6F14;&#xFF1A;<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;showInfo textover1&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;buy&quot;</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">button</span> <span class="hljs-attribute">v-if</span>=<span class="hljs-value">&quot;movies.globalReleased&quot;</span> &gt;</span>&#x8D2D;&#x7968;<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">button</span> <span class="hljs-attribute">v-else</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;pre&quot;</span>&gt;</span>&#x9884;&#x552E;<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>

        <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">transition-group</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-title">script</span>&gt;</span><span class="javascript">

<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;../scss/playing.scss&apos;</span>;

<span class="hljs-comment">/* import { Loadmore } from &apos;mint-ui&apos;;

Vue.component(Loadmore.name, Loadmore); */</span>

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
      created() {
    <span class="hljs-comment">// http://m.maoyan.com == /maoyan</span>

    <span class="hljs-comment">// &#x8BF7;&#x6C42; --&gt; &#x672C;&#x5730;&#x670D;&#x52A1;&#x5668;&#xFF08;webpack&#x7684;devServer&#xFF09;--&gt; &#x732B;&#x773C;&#x7684;&#x670D;&#x52A1;&#x5668;</span>
    <span class="hljs-keyword">this</span>.axios.get(<span class="hljs-string">&quot;/maoyan/ajax/movieOnInfoList&quot;</span>).then(res =&gt; {
      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;&#x6B63;&#x5728;&#x70ED;&#x6620;&#xFF1A;&quot;</span>, res);
      <span class="hljs-keyword">this</span>.movieList = res.data.movieList;
    });

    <span class="hljs-comment">/* this.$store.state.hederTitle  */</span>
  },
  data(){
    <span class="hljs-keyword">return</span> {
      movieList:[]
    }
  },
  methods: {
    <span class="hljs-comment">// &#x4FEE;&#x6539;&#x56FE;&#x7247;&#x5C3A;&#x5BF8;</span>
    picFix(url){
      <span class="hljs-keyword">return</span> url.replace(<span class="hljs-string">&apos;w.h&apos;</span>,<span class="hljs-string">&apos;128.180&apos;</span>);
    },
    <span class="hljs-comment">// &#x8DF3;&#x8F6C;&#x7535;&#x5F71;&#x9875;</span>
    toMovie(id){
      <span class="hljs-comment">/* &#x5F53;&#x6211;&#x70B9;&#x51FB;&#x7684;&#x65F6;&#x5019;&#x628A;&#x8BE5;&#x7535;&#x5F71;&#x7684;&#x4FE1;&#x606F;&#x7684;id&#x4F20;&#x5230;movie&#x7EC4;&#x4EF6;&#x4E0A; */</span>
      <span class="hljs-keyword">this</span>.$router.push({name:<span class="hljs-string">&quot;movie&quot;</span>,params:{ movieId : id } })
    },
    handleTopChange(status) {
        <span class="hljs-keyword">this</span>.topStatus = status;
      },
    }
}
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
</code></pre>
<h3 id="mainjs">mainjs</h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;vue&apos;</span>
<span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./App.vue&apos;</span>
<span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./router&apos;</span>
<span class="hljs-keyword">import</span> store <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./store&apos;</span>

Vue.config.productionTip = false

<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;@/css/reset.css&apos;</span>;
<span class="hljs-comment">//npm i -D axios  &#x7528;&#x6765;&#x505A;&#x8BF7;&#x6C42;</span>
<span class="hljs-keyword">import</span> axios <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;axios&apos;</span>;


<span class="hljs-keyword">import</span> Mint <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;mint-ui&apos;</span>;
<span class="hljs-keyword">import</span> MintUI <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;mint-ui&apos;</span>
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;mint-ui/lib/style.css&apos;</span>

<span class="hljs-keyword">import</span> VueAwesomeSwiper <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;vue-awesome-swiper&apos;</span>

// require styles
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;swiper/dist/css/swiper.css&apos;</span>

Vue.use(VueAwesomeSwiper, /* { default global options } */)


Vue.use(Mint);

Vue.prototype.axios = axios;

<span class="hljs-keyword">new</span> Vue({
  router,
  store,
  render: h =&gt; h(App)
}).$mount(<span class="hljs-string">&apos;#app&apos;</span>)
</code></pre>

                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../../前端学习笔记/Vuejs/Vuejs高级.html" class="navigation navigation-prev " aria-label="Previous page: Vuejs高级"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="../../前端学习笔记/CSS/CSS基础知识目录.html" class="navigation navigation-next " aria-label="Next page: CSS"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="../../gitbook/app.js"></script>

    
    <script src="../../gitbook/plugins/gitbook-plugin-toggle-chapters/toggle.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-expandable-chapters/expandable-chapters.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-search/lunr.min.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-search/search.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-sharing/buttons.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-fontsettings/buttons.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-livereload/plugin.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"toggle-chapters":{},"expandable-chapters":{},"highlight":{},"search":{"maxIndexSize":1000000},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"livereload":{}};
    gitbook.start(config);
});
</script>

        <!-- body:end -->
    </body>
    <!-- End of book 我的笔记 -->
</html>
